<template>
  <div>
    <cus-modal
      ref="modal"
      title="饲料(草)费标准"
      cancelBtnName="关闭"
      :showOkBtn="false"
      @on-visible-change="onVisibleChange"
      width="70"
      @onOk="onOk"
    >
      <Table border :loading="loading" :columns="columns" :data="data">
        <template slot-scope="{ row, index }" slot="project">
          <div class="slotBox" v-if="data[index].value">
            <div
              class="slotBox-item"
              v-for="(item, idx) in data[index].value"
              :key="idx"
              :class="{ noBorderB: idx + 1 == data[index].value.length }"
            >
              {{ item.type }}
            </div>
          </div>
        </template>
        <template slot-scope="{ row, index }" slot="generalReference">
          <div class="slotBox" v-if="data[index].value">
            <div
              class="slotBox-item"
              v-for="(item, idx) in data[index].value"
              :key="idx"
              :class="{ noBorderB: idx + 1 == data[index].value.length }"
            >
              {{ item.referenceRation }}
            </div>
          </div>
        </template>
        <template slot-scope="{ row, index }" slot="generalStandards">
          <div class="slotBox" v-if="data[index].value">
            <div
              class="slotBox-item"
              v-for="(item, idx) in data[index].value"
              :key="idx"
              :class="{ noBorderB: idx + 1 == data[index].value.length }"
            >
              <InputNumber
                style="width:60%"
                :min="0"
                :max="10000"
                :precision="0"
                v-model="item.standardValue"
                v-if="data[index].value[idx].isEdit"
              ></InputNumber>
              <div v-else>{{ item.standardValue }}</div>
            </div>
          </div>
        </template>
        <template slot-scope="{ row, index }" slot="specialReference">
          <div class="slotBox" v-if="data[index].value">
            <div
              class="slotBox-item"
              v-for="(item, idx) in data[index].value"
              :key="idx"
              :class="{ noBorderB: idx + 1 == data[index].value.length }"
            >
              {{ item.operator }}
            </div>
          </div>
        </template>
        <template slot-scope="{ row, index }" slot="specialStandards">
          <div class="slotBox">
            <div
              class="slotBox-item"
              v-for="(item, idx) in data[index].value"
              :key="idx"
              :class="{ noBorderB: idx + 1 == data[index].value.length }"
            >
              <div v-if="item.updateTime">
                {{ item.updateTime | formatTime("yyyy-MM-dd hh:mm:ss") }}
              </div>
              <div v-else></div>
            </div>
          </div>
        </template>
        <template slot-scope="{ row, index }" slot="operation">
          <div class="slotBox">
            <div
              class="slotBox-item"
              v-for="(item, idx) in data[index].value"
              :key="idx"
              :class="{ noBorderB: idx + 1 == data[index].value.length }"
            >
              <div class="flex">
                <cus-button
                  type="text"
                  size="small"
                  :style="{ color: '#1E6FFF', padding: '0 8px' }"
                  @onClick="
                    data[index].value[idx].isEdit = !data[index].value[idx]
                      .isEdit
                  "
                  v-if="data[index].value[idx].isEdit == false"
                >
                  编辑
                </cus-button>
                <cus-button
                  type="text"
                  size="small"
                  :style="{ color: 'gray', padding: '0 8px' }"
                  @onClick="
                    data[index].value[idx].isEdit = false;
                    feedPriceStandardApi();
                  "
                  v-if="data[index].value[idx].isEdit == true"
                >
                  取消
                </cus-button>
                <cus-button
                  type="text"
                  size="small"
                  :style="{ color: 'green', padding: '0 8px' }"
                  @onClick="saveChange(item)"
                  v-if="data[index].value[idx].isEdit == true"
                >
                  保存
                </cus-button>
              </div>
            </div>
          </div>
        </template>
      </Table>
      <div style="color:gray;margin-top:10px">
        * 提示：修改标准若带有小数，将自动取整。
      </div>
    </cus-modal>
  </div>
</template>

<script>
import {
  feedPriceStandard,
  saveFeedPriceStandard
} from "@/api/business/dishesModule";

export default {
  name: "beanStandardModal",
  data() {
    return {
      columns: [
        {
          title: "",
          key: "name",
          align: "center"
        },
        {
          title: "类别",
          slot: "project",
          align: "center"
        },
        {
          title: "参考标准(元)",
          slot: "generalReference",
          align: "center"
        },
        {
          title: "单位标准(元)",
          slot: "generalStandards",
          align: "center"
        },
        {
          title: "最后操作人",
          slot: "specialReference",
          align: "center"
        },
        {
          title: "更新时间",
          slot: "specialStandards",
          align: "center"
        },
        {
          title: "操作",
          width: 200,
          fixed: "right",
          slot: "operation",
          align: "center"
        }
      ],
      data: [
        {
          name: "饲料(草)费标准",
          isEdit: false,
          value: []
        }
      ],
      loading: false
    };
  },
  mounted() {
    // this.form = this.$cu.deepClone(form);
  },
  methods: {
    onVisibleChange(v) {
      if (!v) {
        // this.form = this.$cu.deepClone(form)
      }
    },
    show() {
      this.$refs["modal"].show = true;
      this.feedPriceStandardApi();
    },
    onOk() {},
    // 保存
    saveChange(item) {
      console.log(item);
      this.loading = true;
      return new Promise(resolve => {
        saveFeedPriceStandard(item).then(res => {
          this.loading = false;
          if (res.retCode === 2000) {
            this.$Message.success("修改成功.");
            this.feedPriceStandardApi();
            resolve();
          }
        });
      });
    },
    // 查询定量标准
    feedPriceStandardApi() {
      this.loading = true;
      this.data[0].value = [];
      return new Promise(resolve => {
        feedPriceStandard({}).then(res => {
          this.loading = false;
          if (res.retCode === 2000) {
            if (res.data.length > 0) {
              this.data[0].value = res.data.map(item => {
                item.isEdit = false;
                return item;
              });
            }
            resolve();
          }
        });
      });
    }
  }
};
</script>
<style scoped>
/deep/.ivu-table-cell {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
</style>
<style scoped lang="less">
.slotBox {
  width: 100%;
  // padding: 5px 0;
  &-item {
    padding: 10px 0;
    border-bottom: 1px solid #e3e8ee;
    min-height: 61px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.noBorderB {
  border-bottom: none !important;
}
</style>
